<!--单个图书展示-->
<template>
  <div class="book_list_item">
    <div class="book_list_item_left">
      <img :src="item.imgUrl" alt="" />
    </div>
    <div class="book_list_item_right">
      <p class="book_list_item_title mb10">
        <a href="javascript:;">{{ item.title }}</a>
      </p>
      <p class="book_list_item_price mb10">
        <del>{{ currency(factPrice(item.price, item.discount)) }}</del
        >{{ item.price }}
      </p>
      <p class="book_list_item_publish mb10">
        {{ item.author }}{{ item.publishDate }}{{ item.bookConcern }}
      </p>
      <p class="mb10">
        {{ item.brief }}
      </p>
      <button>加入购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "BookListItem",
  data() {
    return {};
  },
  props: {
    item: Object,
    default: () => {},
  },
  inject: ["factPrice", "currency"],
};
</script>

<style>
.book_list_item {
  width: 100%;
  border-bottom: 1px solid gainsboro;
  padding-bottom: 20px;
  overflow: hidden;
  padding-top: 20px;
}

.book_list_item_left {
  float: left;
  margin-right: 20px;
  width: 10%;
}

.book_list_item_left img {
  width: 100%;
  height: auto;
}

.book_list_item_right {
  float: left;
  width: 88%;
}

.mb10 {
  margin-bottom: 10px;
}

.book_list_item_right button {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}
</style>
